<template>
  <div class="container">
    <div class="search">
      <i class="iconfont search1"></i
      ><input
        type="text"
        v-model="city"
        placeholder="请输入城市名、拼音或字母查询"
      />
    </div>
    <div :style="{ display: city ? 'block' : 'none' }">
      <li :style="{ display: cityList.length ? 'none' : 'block' }">
        未搜索到城市
      </li>
      <li
        class="result"
        :style="{ display: cityList.length ? 'block' : 'none' }"
        v-for="item in cityList"
        @click="selectCity(item.name)"
      >
        {{ item.name }}
      </li>
    </div>
    <div :style="{ display: city ? 'none' : 'block' }">
      <h3>当前城市</h3>
      <button class="current">{{ $mapcity.currentCity }}</button>
      <h3>定位/最近访问</h3>
      <div>
        <button class="location">
          <i class="iconfont ic_site"></i> {{ ipCity }}
        </button>
        <button v-for="item in recentCities" @click="selectCity(item)">
          {{ item }}
        </button>
      </div>
      <h3>热门城市</h3>
      <div>
        <button v-for="item in hotCities" @click="selectCity(item.name)">
          {{ item.name }}
        </button>
      </div>
    </div>
    <van-index-bar :style="{ display: city ? 'none' : 'block' }">
      <div v-for="(item, key) in cities">
        <van-index-anchor :index="key" />
        <van-cell
          v-for="city in item"
          :title="city.name"
          @click="selectCity(city.name)"
        />
      </div>
    </van-index-bar>
  </div>
</template>

<script setup>
import { localStorageStoreByCityName } from '@/hooks'
import { useRouter } from 'vue-router'
import { getCityDataHttp, getIpCityHttp } from '@/request/cityHttp'
import { ref, onMounted, watch } from 'vue'
import { useMapCity } from '@/stores/mapCity'
import PinyinMatch from 'pinyin-match' // es
// const PinyinMatch = require('pinyin-match'); // commonjs
const $router = useRouter()
const hotCities = ref([])
//所有城市数据
const cities = ref({})
//搜索城市列表
let cityList = ref([])
let ipCity = ''
//最近访问
let recentCities = ref([])
//当前城市
let currentCity = ref('')
//输入的城市名称
const city = ref('')
const $mapcity = useMapCity()
//获取localStorage数据
onMounted(() => {
  currentCity.value = localStorage.getItem('currentCity') || ''
  $mapcity.setCurrentCity(currentCity.value)
  recentCities.value = JSON.parse(localStorage.getItem('recentCities')) || []
})
//加载城市数据
onMounted(async () => {
  let { data } = await getCityDataHttp()
  // console.log(data.cities)
  hotCities.value = data.hotCities
  cities.value = data.cities
})
//加载ip城市数据
onMounted(() => {
  getIpCityHttp().then((res) => {
    ipCity = res.city.replace('市', '')
  })
  // console.log('ipCity', ipCity)
})
//搜索城市
watch(city, () => {
  cityList.value = []
  for (let item in cities.value) {
    cities.value[item].forEach((item) => {
      if (PinyinMatch.match(item.name, city.value)) {
        cityList.value.push(item)
        cityList.value= cityList.value.filter(item=>item.spell.startsWith(city.value.toLowerCase())||item.name.startsWith(city.value))
      }
    })
  }
  // console.log('cityList', cityList.value)
})
//选择城市
const selectCity = (cityName) => {
  recentCities.value = localStorageStoreByCityName({ cityName, recentCities })
  city.value = ''
  $router.back()
}
//监听最近访问
watch(recentCities, () => {
  localStorage.setItem('recentCities', JSON.stringify(recentCities.value))
  localStorage.setItem('currentCity', $mapcity.currentCity)
})
</script>

<style scoped>
.container {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.search {
  position: relative;
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-block: 10px;
  padding: 1px 11px;
  background-color: #efefef;
  border: 1px solid #a2a2a2;
  border-radius: 4px;
}
.search i {
  color: #898989;
  font-size: 18px;
}
.search input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background-color: #efefef;
  font-size: 14px;
  color: #898989;
  padding-left: 18px;
}
.container li {
  list-style: none;
  height: 30px;
  padding: 0 15px;
  font-size: 14px;
  line-height: 30px;
  border-bottom: 1px solid #efefef;
}
.container .result {
  cursor: pointer;
}
.container .result:hover {
  background-color: #efefef;
}

.container h3 {
  text-indent: 15px;
  line-height: 40px;
  color: #666;
  font-size: 16px;
  font-weight: lighter;
  background-color: #efeeee;
  margin: 6px 0;
}
.container button {
  width: 80px;
  height: 40px;
  background-color: #fff;
  margin-right: 10px;
  border: 1px solid #c2c0c0;
  border-radius: 5px;
  margin-top: 6px;
  font-size: 14px;
  cursor: pointer;
}
.container button:hover {
  background-color: #ccc;
}
.container .current {
  background-color: #198754;
  color: #fff;
}
.container .current:hover {
  background: #ccc;
}
.location i {
  color: #2d6fff;
  font-weight: 600;
  font-size: 13px;
}
.van-cell {
  cursor: pointer;
}
.van-cell:hover {
  background-color: #efefef;
}
</style>
